import { useEffect, useState } from "react";
import { Avatar, List } from "antd";
import "./index.scss";
import { getGroupList } from "@renderer/api";

interface DataType {
  groupId: string;
  groupName: string;
  description: string;
  avatar: string;
}

const MyGroup = (): JSX.Element => {
  const [list, setList] = useState<DataType[]>([]);
  useEffect(() => {
    const result = getGroupList();
    setList(result);
  }, []);

  return (
    <div className="my-group">
      <div className="title-bar">
        <div className="title">我的群聊</div>
      </div>
      <List
        itemLayout="horizontal"
        dataSource={list}
        renderItem={({ groupName, description }) => (
          <List.Item actions={[<a key="list-loadmore-edit">退出群聊</a>]}>
            <List.Item.Meta
              avatar={
                <Avatar size={32}>{groupName.charAt(0)}</Avatar>
                // <Avatar size={32} src={avatar} />
              }
              title={<a>{groupName}</a>}
              description={description}
            />
          </List.Item>
        )}
      />
    </div>
  );
};

export default MyGroup;
